<template>
  <div class="form-flow">
    <div class="form-flow-content">
      <div class="form-flow-button-wrapper">
        <a-button icon="plus" @click="addNewFlow"
                  shape="round" type="primary">新建</a-button>
      </div>
      <div class="form-flow-button-body">
        <HTable :columns="columns" :configurable="false" select="false"></HTable>
      </div>
    </div>

    <FormFlowModal :formDefinition="formDefinition" ref="FormFlowModal" @ok="handleOK"/>
  </div>
</template>
<script>
import HTable from '@/components/hhd/design/HTable/HTable.vue';
import {createFormDefinition} from '@/components/hhd/design/FormDesigner/types';
import {createProps} from '@/utils';
import FormFlowModal from '@/components/hhd/design/FormFlow/FormFlowModal.vue';

export default {
  name: 'FormFlow',
  components: {FormFlowModal, HTable},
  props: {
    flows: createProps(Array),
    formDefinition: createProps(Object, createFormDefinition)
  },
  data() {
    return {
      columns,
    };
  },
  methods: {
    addNewFlow() {
      this.$refs.FormFlowModal.addNew();
    },
    handleOK() {
    },
    check() {
      return new Promise((success, err) => {
        success();
      });
    },
  }
};

const columns = [
  {
    title: '流程名称',
    dataSource: 'flowName'
  },
  {
    title: '流程创建日期',
    dataSource: 'createTime'
  },
  {
    title: '最后一次修改日期',
    dataSource: 'updateTime'
  }
];
</script>
<style>
.form-flow {
  width: 100%;
  height: 100%;
  padding: 10px;
}

.form-flow-content {
  height: 100%;
  width: 100%;
  background: white;
  border: 1px solid #e2e4e9;
  padding: 10px;
}

.form-flow-button-wrapper > * {
  margin-right: 5px;
}

.form-flow-button-wrapper {
  margin-bottom: 10px;
}
</style>